<template>
  <div class="header-container">
    <nav class="nav-bar">
      <ul class="nav-items">
        <li v-if="username" :key="$route.fullPath">你好，{{ username }}</li>
        <li v-else @click="$router.push('/login')">登录</li>
        <li>我的订单</li>
        <li>我的国出</li>
        <li>商家服务</li>
        <li>网站导航</li>
        <li @click="logout">安全退出</li>
      </ul>
    </nav>
  </div>
</template>


<script>
import {useRouter} from 'vue-router';

export default {
  data() {
    return {
      username: '', // 存储用户名
    };
  },

  //  mounted这个方法不好使； 用watch
  watch: {
    '$store.getters.user': {
      immediate: true,
      handler(newUser) {
        if (newUser) {
          this.username = newUser.username;
        } else {
          this.username = '';
          this.$router.push('/login');
        }
      }
    }
  }
  ,
  mounted() {
    const router = useRouter();
    //  使用  veux 的方法判断
    // 检查用户是否已登录
    const storedUsername = this.$store.getters.user;
    console.log("dsadf" + this.$store.getters.user)
    if (storedUsername) {
      this.username = storedUsername.username; // 如果已登录，显示用户名
      console.log(this.username);
    } else {
      router.push('/login'); // 如果未登录，跳转到登录页面
    }

  },
  methods: {
    // 模拟安全退出功能
    logout() {
      this.$store.dispatch('setUser', null);
      this.username = '';
      this.$router.push({path: "/login"}); // 跳转到登录页面
    },
  },
};
</script>


<style scoped>
.header-container {
  display: flex;
  justify-content: center; /* 整体布局居中 */
  width: 100%;
  max-width: 1600px; /* 页面宽度固定为1600px */
  margin: 0 auto; /* 导航栏居中 */
}

.nav-bar {
  background-color: #f0f0f0; /* 浅灰色背景 */
  padding: 10px 0; /* 内边距 */
  border-radius: 5px; /* 圆角 */
  width: 100%; /* 导航栏宽度与父容器一致 */
}

.nav-items {
  list-style: none; /* 去掉默认的列表样式 */
  display: flex;
  justify-content: flex-end; /* 导航项靠右对齐 */
  gap: 20px; /* 项之间的间距 */
  margin: 0; /* 去掉默认的外边距 */
  padding: 0; /* 去掉默认的内边距 */
}

.nav-items li {
  font-size: 14px; /* 字体大小 */
  color: #333; /* 字体颜色 */
  cursor: pointer; /* 鼠标悬停时显示手型 */
}
</style>